<template>
  <div class="info-box">
    <div class="ava">
      <a-avatar :src="avatar" :size="180" />
    </div>
    <div class="info">
      <div class="name-box">
        <div class="name-wrap">
          <span class="name">{{ nickname }}</span>
          <div class="level">LV.{{level}}</div>
          <span class="iconfont icon-man"></span>
          <!-- <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-man"></use>
          </svg> -->
        </div>
        <a-button class="setinfo" type="primary" shape="round" @click="toupdate">
          编辑个人资料
        </a-button>
      </div>
      <a-divider class="fenge" />
      <!-- 粉丝关注数 -->
      <div class="tab-box">
        <a class="post">
          <strong>6</strong>
          <span>动态</span>
        </a>
        <a-divider class="vertical" type="vertical" />
        <a class="fllows">
          <strong>12</strong>
          <span>关注</span>
        </a>
        <a-divider class="vertical" type="vertical" />
        <a class="fans">
          <strong>99</strong>
          <span>粉丝</span>
        </a>
      </div>
      <!-- 个人简介 -->
      <div class="introduce">
        <span> 个人介绍：{{ introduce }} </span>
      </div>
      <div class="place">
        <span class="area"> 所在地区：{{ place }} </span>
        <span class="age">年龄：{{ years }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/svg/iconfont.css";
import { get_userinfo } from "@/request/api/user";
export default {
  data () {
    return {
      birthday: "",
      sex: "",
      //级联选择默认值
      selectedPlace: "",
    };
  },
  computed: {
    token () {
      return this.$store.state.token;
    },
    nickname(){
        return this.$store.state.username
    },
    level(){
        return this.$store.state.level
    },
    avatar () {
      return this.$store.state.avatar;
    },
    introduce(){
        return this.$store.state.introduce
    },
    place () {
      if (this.$store.state.city == '') {
        return '陕西省-西安市-雁塔区'
      } else {
        return this.$store.state.city
      }
    },
    years () {
      if (this.birthday) {
        let year = Number(this.birthday.split("-")[0]);
        let dyear = Math.floor((year - 1950) / 10);
        let years = "";
        switch (dyear) {
          case 0:
            years = "50后";
            break;
          case 1:
            years = "60后";
            break;
          case 2:
            years = "70后";
            break;
          case 3:
            years = "80后";
            break;
          case 4:
            years = "90后";
            break;
          case 5:
            years = "00后";
            break;
          case 6:
            years = "10后";
            break;
          case 7:
            years = "20后";
            break;

          default:
            years = "保密";
            break;
        }
        return years;
      }
      else {
        return "保密"
      }
    }
  },
  methods: {
    toupdate () {
      this.$router.push(
        {
          name: "Update"
        },
        onComplete => { },
        onAbort => { }
      );
    }
  }
};
</script>

<style scoped>
.info-box {
  width: 900px;
  height: 197px;
  margin-bottom: 42px;
  background-color: #fff;
}

.ava {
  width: 188px;
  height: 188px;
  margin-right: 40px;
  float: left;
}

.info {
  width: 670px;
  height: 197px;
  float: left;
}

/* 清除浮动 */
.name-box::after {
  display: "block";
  clear: both;
  height: 0;
  content: "";
  visibility: hidden;
  overflow: hidden;
}

.name-box {
  width: 100%;
  height: 39px;
}

.name-wrap {
  width: 244px;
  height: 100%;
  float: left;
}

.name-box span {
  font-size: 22px;
  font-weight: normal;
  color: #000;
  margin-right: 10px;
  float: left;
  line-height: 39px;
}

.level {
  float: left;
  width: 47px;
  margin-top: 8px;
  margin-right: 10px;
  border: 2px solid red;
  border-radius: 10px;
  color: #e03a24;
  font-style: oblique;
  text-align: center;
}

svg {
  font-size: 25px;
  margin-top: 8px;
}

.setinfo {
  float: right;
  margin-top: 2px;
}
.fenge {
  margin: 10px 0;
}

.tab-box {
  width: 100%;
  height: 53px;
}
.tab-box a {
  width: 27px;
  height: 40px;
  display: flex;
  flex-direction: column;
  float: left;
  margin-right: 30px;
  color: #666666;
}
.tab-box a:hover {
  color: #4d79f7;
}

.tab-box a strong {
  font-size: 24px;
}

.tab-box a span {
  width: 26px;
  height: 16px;
  font-size: 12px;
}

.vertical {
  float: left;
  margin-top: 10px;
  margin-right: 20px;
  height: 80%;
}

.introduce {
  width: 100%;
  height: 21px;
  font-size: 12px;
  margin-top: 15px;
}
.place {
  width: 100%;
  height: 21px;
  font-size: 12px;
  margin-top: 5px;
}
.area {
  margin-right: 30px;
}
</style>
